<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <title>服务网点</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/js.cookie.js"></script>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
	<meta name="viewport" content="width=device-width, initial-scale=1" /> 
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
	
	<style type="text/css">
	body{text-align:center;
	font-family:微软雅黑,宋体;
    font-size :20px;
    color : #f00;
    }
   
.form{
  width: 100%;
  margin: 0.3rem auto;
  font-size: 0.7rem;
  td{
    height: 2.5rem;
  }
  input{
    font-family: "Microsoft Yahei";
    outline: none;
    color: #d8d8d8;
  }
  input[type=text],input[type=phone],input[type=email]{
    border: 1px solid #e10000;
    height: 1.55rem;
    line-height: 1.55rem;
    padding-left: 0.4rem;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
  }
  }
  </style>
   	
  </head>
  
  <body>
  <script type="text/javascript">
  var str;
  
  var x=document.getElementById("company");
  function getLocation()
  {
  if (navigator.geolocation)
    {
	  navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{
	  x.innerHTML="Geolocation is not supported by this browser.";}
  }
   var EARTH_RADIUS = 6378137.0;    //单位m
    var PI = Math.PI;
     
     function getRad(d){
		 // alert("getRad");
         return d*PI/180.0;
    }
     
   function showPosition(position,lat1,lng1,lat2,lng2)
     {
     		$("#company").text("");
     		var lat1 = position.coords.latitude;
     		var lng1 = position.coords.longitude;
             $.ajax({
           url:"card/querynearService.html",
           type:"post",
           dataType:"json",
           async: false,
           success:function(data){
        	   if(data.length==0){
        		   alert("附近暂无符合条件的服务网点！");
        		   return;
        	   }
           	var cookieData = new Array();
             $(data).each(function(index){
               var val = data[index];

            var lat2 = val.comlat;
            var lng2 = val.comlng;
            var radLat1 = getRad(lat1);
            var radLat2 = getRad(lat2);
            
            var a = radLat1 - radLat2;
            var b = getRad(lng1) - getRad(lng2);
            
            var s = 2*Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
            s = s*EARTH_RADIUS;
            s = Math.round(s*10000)/10000.0; 
  			 	if(s<=2500){
					 //str0 ="<img src=\"image/down.png\" style = \"margin-top:3px;height:15px;width:20px;\"><h5 style='position:absolute;left:40px;top:3px;'>"+val.comname+"</h5>"+"<input type='button' value='导航' style='position:absolute;right:20px;'"+" onclick=\"nav("+val.comlat+","+val.comlng+","+"\'"+val.comname+"\'"+")\""+" id=\"new_div_first_bt1_"+index+"\"/>";
					str0 ="<table><tr><td style='width:10%;'><img class='new_div_button' src=\"image/down.png\" style = \"margin-top:3px;height:15px;width:20px;\"></td> <td style='word-wrap:break-word;width:80%;font-size: 20px;'>"+val.servname+"</td>"+"<td><div><img src='image/nav.png' style='height:30px;' onclick=\"nav("+val.servlat+","+val.servlng+","+"\'"+val.servname+"\'"+")\""+" id=\"new_div_first_bt1_"+index+"\"/></div></td></tr></table>";
					 strTest="<table style='margin-top:10px;'><tr><td style='width:15%;'><img src='image/loc.png' style='height:20px;padding-left:25px;'/></td> <td style='width:85%;font-size: 12px;'>"+val.servaddress+"</td></tr><tr><td style='width:15%;'><img src='image/discount.png' style='height:20px;padding-left:25px;'/></td><td style='width:85%;font-size: 12px;'>"+val.servwork+"</td></tr><tr><td style='width:15%;'><img src='image/phone.png' style='height:20px;padding-left:25px;'/></td><td style='width:85%;font-size: 12px;'><a href=\"tel:"+val.serphone+"\">"+val.serphone+"</a></td></tr></table>";
					 addElementDiv("company",index,"new_div_"+index,str0);
					 addElementDiv("new_div_"+index,index,"new_div_first_"+index,strTest);
					 addClass("new_div_"+index);
					 addElementHR("new_div_"+index);
					 cookieData.push(val);

   				}         
             });
              Cookies.set("ServiceNodeSearchResult",cookieData,{expires:60000});
             
           },
           error:function() {
             alert("error");
           
           }
         });

     	     
        }
  
  $(document).ready(function(){
  		$("#company").text("");
	  var data = Cookies.get("ServiceNodeSearchResult");
	   Cookies.set("ServiceNodeSearchResult","",{expires:-1});
   			//eval方法加（）的目的是将方法中的参数转化为表达式，因为json是以{}开头结尾的，这样容易让eval误会。不过jsonArray的话就不用
			var dataJSON = eval("("+data+")");   
			if(data==null||data==""||data==undefined){
	  			getLocation();
	  			}else{
	  			$.each(dataJSON, function (index, val) 
				{
					//str0 ="<img src=\"image/down.png\" style = \"margin-top:3px;height:15px;width:20px;\"><h5 style='position:absolute;left:40px;top:3px;'>"+val.comname+"</h5>"+"<input type='button' value='导航' style='position:absolute;right:20px;'"+" onclick=\"nav("+val.comlat+","+val.comlng+","+"\'"+val.comname+"\'"+")\""+" id=\"new_div_first_bt1_"+index+"\"/>";
					str0 ="<table><tr><td style='width:10%;'><img class='new_div_button' src=\"image/down.png\" style = \"margin-top:3px;height:15px;width:20px;\"></td> <td style='word-wrap:break-word;width:80%;font-size: 20px;'>"+val.servname+"</td>"+"<td><div><img src='image/nav.png' style='height:30px;' onclick=\"nav("+val.servlat+","+val.servlng+","+"\'"+val.servname+"\'"+")\""+" id=\"new_div_first_bt1_"+index+"\"/></div></td></tr></table>";
					 strTest="<table style='margin-top:10px;'><tr><td style='width:15%;'><img src='image/loc.png' style='height:20px;padding-left:25px;'/></td> <td style='width:85%;font-size: 12px;'>"+val.servaddress+"</td></tr><tr><td style='width:15%;'><img src='image/discount.png' style='height:20px;padding-left:25px;'/></td><td style='width:85%;font-size: 12px;'>"+val.servwork+"</td></tr><tr><td style='width:15%;'><img src='image/phone.png' style='height:20px;padding-left:25px;'/></td><td style='width:85%;font-size: 12px;'><a href=\"tel:"+val.serphone+"\">"+val.serphone+"</a></td></tr></table>";
					 addElementDiv("company",index,"new_div_"+index,str0);
					 addElementDiv("new_div_"+index,index,"new_div_first_"+index,strTest);
					 addClass("new_div_"+index);
					 addElementHR("new_div_"+index);
				});
	  			}
  		
	  $("#search_company").click(function(){
		  $("#company").text("");
		  $.ajax({
				url:"card/queryService.html",
				type:"post",
				dataType:"json",
				async: false,
				data:{servName:$("#servName").val(),servArea:$("#servArea").val(),servType:$("#servType").val()},
				success:function(data){
					
					if(data.length==0){
		        		   alert("暂无符合条件的服务网点！");
		        		   return;
		        	   }
					$(data).each(function(index){

					var val = data[index];
					 //str0 ="<img src=\"image/down.png\" style = \"margin-top:3px;height:15px;width:20px;\"><h5 style='position:absolute;left:40px;top:3px;'>"+val.comname+"</h5>"+"<input type='button' value='导航' style='position:absolute;right:20px;'"+" onclick=\"nav("+val.comlat+","+val.comlng+","+"\'"+val.comname+"\'"+")\""+" id=\"new_div_first_bt1_"+index+"\"/>";
					str0 ="<table><tr><td style='width:10%;'><img class='new_div_button' src=\"image/down.png\" style = \"margin-top:3px;height:15px;width:20px;\"></td> <td style='word-wrap:break-word;width:80%;font-size: 20px;'>"+val.servname+"</td>"+"<td><div><img src='image/nav.png' style='height:30px;' onclick=\"nav("+val.servlat+","+val.servlng+","+"\'"+val.servname+"\'"+")\""+" id=\"new_div_first_bt1_"+index+"\"/></div></td></tr></table>";
					 strTest="<table style='margin-top:10px;'><tr><td style='width:15%;'><img src='image/loc.png' style='height:20px;padding-left:25px;'/></td> <td style='width:85%;font-size: 12px;'>"+val.servaddress+"</td></tr><tr><td style='width:15%;'><img src='image/discount.png' style='height:20px;padding-left:25px;'/></td><td style='width:85%;font-size: 12px;'>"+val.servwork+"</td></tr><tr><td style='width:15%;'><img src='image/phone.png' style='height:20px;padding-left:25px;'/></td><td style='width:85%;font-size: 12px;'><a href=\"tel:"+val.serphone+"\">"+val.serphone+"</a></td></tr></table>";
					 addElementDiv("company",index,"new_div_"+index,str0);
					 addElementDiv("new_div_"+index,index,"new_div_first_"+index,strTest);
					 addClass("new_div_"+index);
					 addElementHR("new_div_"+index);
					
					});
					Cookies.set("ServiceNodeSearchResult",data,{expires:60000});
				},
				error:function() {
					alert("error");
				
				}
			});
	  });	
  });
  
    function addElementDiv(obj,index,obj2,str) {
	  var company = document.getElementById(obj);
	  var div = document.createElement("div");
	  div.setAttribute("margin", "0 auto");
	  div.setAttribute("width","100%");
	  div.setAttribute("style","position:relative;text-align:left;");
	  div.setAttribute("id", obj2);
	  if(str!=""){
	   div.innerHTML = str;}
	  company.appendChild(div);
  		}
  	  function nav(lat,lng,comName){
		window.location.href=("http://m.amap.com/navi/?start=&dest="+lng+","+lat+"&destName=到"+comName+"去&naviBy=car/bus/walk&key=c2a9fd3dde0d244751cd27a23fb7cb26");
		}
		function loc(lat,lng,comName){
		window.location.href=("http://m.amap.com/navi/?dest="+lng+","+lat+"&destName="+comName+"&hideRouteIcon=1&key=c2a9fd3dde0d244751cd27a23fb7cb26");
		}
	  
  function addElementHR(obj){
  	var company = document.getElementById(obj);
  	var HR = document.createElement("HR");
  	company.appendChild(HR);
  } 
	function addClass(str){
  	var div = document.getElementById(str);
  	div.setAttribute("class","new_div");
  	$(".new_div").children("div").hide();
  	$(".new_div").css({
  						"width":"100%"
  		  			});
  }
	//jquery只能给文档中本来就有的元素添加click事件，不能为js动态生成的部分添加click，必须用下面的live方法才行。
  	$(".new_div_button").live('click',function(){
  		$(this).toggle(function () {
  			$(this).parent().parent().parent().parent().parent().addClass("highlight").children("div").show().end();
  			$(this).parent().parent().parent().parent().parent().children("table").children("tbody").children("tr").children("td").children("img").attr("src", "image/up.png");
  		},function () {
  			$(this).parent().parent().parent().parent().parent().addClass("highlight").children("div").hide().end();
  			$(this).parent().parent().parent().parent().parent().children("table").children("tbody").children("tr").children("td").children("img").attr("src", "image/down.png");		
  		});	
  		$(this).trigger('click');
  });
  
  </script>
 <div data-role="page">
          <div data-role="content" style="height:20%; background-color:#E68F7E;">
         <center> 
         <p style="font-size:20px;text-shadow:none;">服务网点</p>
          </center> 
          </div>
      
  <div style="margin-top:10px;">
  
  <table class="form">
  <tr >
   <td colspan="3"><span style="float:left; width:75%;"> <input style="padding-left:5%;background-color:white; height:40px;font-size:16px;" type="text" name="servName" id="servName" placeholder="搜索内容..."></span>
   <span style="float:right; position:absolute;
                right:1%;
                z-index:99; "><input style="width:100%;height:100%;font-size:12px" type="button" id="search_company"  value="检索"></span></td>
                </tr>
                </table>
  </div>

   <div data-role="content" style="">
    <form >
      <div data-role="fieldcontain"style="padding:0px;" >
        <fieldset data-role="controlgroup" data-type="horizontal" style="width:100%">
            
            <select name="servType" id="servType" >
              <option value="">业务</option>
              <option value="餐饮">餐饮</option>
              <option value="商场">商场</option>
              <option value="商务">商务</option>
              <option value="科技">科技</option>
            </select>

            
            <select name="servArea" id="servArea">
              <option value="">区域</option>
              <option value="江东区">江东区</option>
              <option value="高新区">高新区</option>
              <option value="海曙区">海曙区</option>
            </select>

            <a href="#" data-role="button" onclick="getLocation()">附近</a>
        </fieldset>
      </div>
    </form>
   </div> 
  <div id="company" style="margin:0 auto;width:95%;padding:5px;-moz-border-radius:7px; -webkit-border-radius: 7px ;border:1px solid #E68F7E;background-color:#EBEBEB;"></div>
  </body>
</html>